const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
const name='简易后台框架';
const port=8080;

module.exports = {
    publicPath:'/', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，例：如果值为'/admin',则部署到服务器的地址为：http://${服务器地址}:{port}/admin
    outputDir:'dist', //生成的生产环境构建文件的目录
    assetsDir:'static',//打包后的静态文件目录
    lintOnSave: process.env.NODE_ENV === 'development',//设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败
    productionSourceMap: false,//和webpack中的source map相同，将其设置为 false 以加速生产环境构建
     //开发环境的配置，在这里边可以设置代理
    // devServer: {
    //     port: port,
    //     open: true,
    //     overlay: {
    //         warnings: false,
    //         errors: true
    //     },
    // },
    configureWebpack:{   //如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
        name:name,//配置名称
    },

    chainWebpack(config) {//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
        config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options=>{
            options.compilerOptions.preserveWhitespace = true
            return options
        })
        .end()
        
        config
        .when(process.env.NODE_ENV==='development',config=>config.devtool('source-map'))

        config
        .when(process.env.NODE_ENV!=='development',
        config=>{
            config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
                  inline: /runtime\..*\.js$/
                }])
                .end()
            config
            .optimization.splitChunks({
                chunks:'all',//选择哪些块进行优化
                cacheGroups:{ //缓存组可以继承和/或覆盖任何选项splitChunks.*
                    libs:{
                        name: 'chunk-libs',
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10,
                        chunks: 'initial' // only package third parties that are initially dependent
                    },
                    elementUI:{
                        name:'chunk-elementUI',
                        priority:20,
                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/
                    },
                    commons:{
                        name:'chunk-commons',
                        test:resolve('src/components'),  //全局组件
                        minChunks:3,//分割前必须共享模块的最小块数
                        priority:5,
                        reuseExistingChunk:true
                    }
                }
            })   
            config.optimization.runtimeChunk('single') //该值'single'代替创建一个运行时文件，以便为所有生成的块共享
        }
        )
    },

    pluginOptions: {
      i18n: {
        locale: 'en',
        fallbackLocale: 'en',
        localeDir: 'locales',
        enableInSFC: false
      }
    }
}
